<template>
    <view class="assetrecord">
        <view class="tabten">
            <image @click="backfnbtn" class="bacbtn" src="../../static/img/backbent.png"></image>
            <view class="zijlze">资产记录</view>
            <view class="ccgfr">
                <picker mode=selector :value="ind" :data-val="array[ind].vals" range-key="name" :range="array"
                    @change="bindPickerChange">
                    <image src="../../static/img/shaixuan.png"></image>
                </picker>
            </view>
        </view>
        <view style="padding: 190rpx 0 0 0;">
            <view class="listitm" v-for="(item,index) in assetList" :key="index">
                <view class="uptext">
					<view>
						<image class="exchangeImgSmall" v-if="item.exchangeType==0" src="../../static/img/ind0.png"></image>
						<image class="exchangeImgSmall" v-if="item.exchangeType==1" src="../../static/img/ind2.png"></image>
						<image class="exchangeImgSmall" v-if="item.exchangeType==2" src="../../static/img/ind1.png"></image>
					</view>
                    <text>数量</text>
                    <text>类型</text>
                    <text class="timeres">时间</text>
                </view>
                <view class="downtext">
                    <text>{{item.amount}}</text>
                    <text>{{item.type}}</text>
                    <text class="twex">{{item.createTime}}</text>
                </view>
            </view>
        </view>
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
        <view v-show="isLoadMore">
            <uni-load-more :status="loadStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import WucTab from '@/components/wuc-tab/wuc-tab.vue';
    import uniLoadMore from '../../components/uni-load-more.vue';
	import backTop from '../../components/back-top/back-top.vue';
    export default {
        components: {
            WucTab,
            uniLoadMore,
			backTop
        },
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
        data() {
            return {
				scrollTop: 0,
				backTop: {
					src: '../../static/top.png',
					scrollTop: 0
				},
                ind: 0,
                loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
                page: '1',
                limt: '10',
                TabCur: 0,
                tabs: [{
                        vals: '',
                        name: '全部'
                    }, {
                        vals: '0',
                        name: '充币'
                    }, {
                        vals: '1',
                        name: '提币'
                    }, {
                        vals: '2',
                        name: '转账'
                    },
                    {
                        vals: '3',
                        name: '扣除点卡'
                    }

                ],
                array: [{
                        vals: '0',
                        name: '充币'
                    }, {
                        vals: '1',
                        name: '提币'
                    }, {
                        vals: '12',
                        name: '提币审核'
                    }, {
                        vals: '2',
                        name: '转账'
                    },
                    {
                        vals: '3',
                        name: '扣除点卡'
                    }, {
                        vals: '4',
                        name: '购买激活码'
                    },
                    {
                        vals: '5',
                        name: '推荐奖'
                    },
                    {
                        vals: '6',
                        name: '团队奖'
                    },
                    {
                        vals: '7',
                        name: '盈利'
                    },
                    {
                        vals: '8',
                        name: '购买点卡'
                    }, {
                        vals: '9',
                        name: '全球分红奖'
                    }
                ],
                array1: ['充币', '提币', '转账', '扣除点卡', '购买激活码', '推荐奖', '团队奖', '盈利', '购买点卡', '全球分红奖'],
                active: 0,
                assetList: [],
                tabid: ''
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
            this.assetListFn('');
        },
        //下拉刷新
        onPullDownRefresh() {
            console.log('refresh');
            this.page = '1';
            this.assetList = [];
            this.assetListFn(this.tabid);
        },
        onReachBottom() { //上拉触底函数
            if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
                this.isLoadMore = true;
                this.page++;
                this.page = this.page.toString()

                this.assetListFn(this.tabid);
            }
        },
        onNavigationBarButtonTap: function(e) {
        },
        methods: {
            backfnbtn() {
                uni.switchTab({
                    url: '/pages/mine/mine',
                });
            },
            bindPickerChange: function(e) {
                // '购买激活码','推荐奖','团队奖','盈利','购买点卡','全球分红奖'
                console.log(e.target.value)
                this.assetList = [];
                this.page = '1';
                this.ind = e.target.value;
                //充币
                if (e.target.value == 0) {
                    this.tabid = '0'
                    this.assetListFn('0');
                }
                //提币
                if (e.target.value == 1) {
                    this.tabid = '1'
                    this.assetListFn('1');
                }
                //提币审核
                if (e.target.value == 2) {
                    this.tabid = '12'
                    this.assetListFn('12');
                }
                //转账
                if (e.target.value == 3) {
                    this.tabid = '2'
                    this.assetListFn('2');
                }
                //扣除点卡
                if (e.target.value == 4) {
                    this.tabid = '3'
                    this.assetListFn('3');
                }
                //购买激活码
                if (e.target.value == 5) {
                    this.tabid = '4'
                    this.assetListFn('4');
                }
                //推荐奖
                if (e.target.value == 6) {
                    this.tabid = '5'
                    this.assetListFn('5');
                }
                //团队奖
                if (e.target.value == 7) {
                    this.tabid = '6'
                    this.assetListFn('6');
                }
                //盈利
                if (e.target.value == 8) {
                    this.tabid = '7'
                    this.assetListFn('7');
                }
                //购买点卡
                if (e.target.value == 9) {
                    this.tabid = '8'
                    this.assetListFn('8');
                }
                //全球分红奖
                if (e.target.value == 10) {
                    this.tabid = '9'
                    this.assetListFn('9');
                }

            },
            tabChange(index, e) {
                this.TabCur = index;
                this.page = '1';
                this.isLoadMore = false;
                this.assetList = [];
                this.assetListFn(e.currentTarget.id);
            },
            assetListFn(types) {

                request.postAssets('/assets/walletAssetsFlow/queryWalletAssetsFlow', {
                    userId: uinfo.userId,
                    pageSize: '10',
                    pageNumber: this.page,
                    type: types,
                    sortAttribute: '2', //排序属性 1:金额 2:创建时间 ,
                    sortType: 'descend', //排序类型 升序:ascend 降序:descend ,
                }).then(res => {
                    //console.log(res)
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        res.data.items.map(item => {
                            //console.log(item.type)
                            switch (item.type) {
                                case 0:
                                    item.type = '充币';
                                    break;
                                case 1:
                                    item.type = '提币';
                                    break;
                                case 12:
                                    item.type = '提币审核';
                                    break;
                                case 2:
                                    item.type = '转账';
                                    if (item.toUserId != uinfo.userId) {
                                        item.amount = '-' + item.amount
                                    }
                                    break;
                                case 3:
                                    item.type = '扣除点卡';
                                    break;
                                case 4:
                                    item.type = '购买激活码';
                                    break;
                                case 5:
                                    item.type = '推荐奖';
                                    break;
                                case 6:
                                    item.type = '团队奖';
                                    break;
                                case 7:
                                    item.type = '盈利';
                                    break;
                                case 8:
                                    item.type = '购买点卡';
                                    break;
                                case 9:
                                    item.type = '全球分红奖';
                                    break;

                            }



                        })
                        if (res.data.items.length > 0) {
                            this.assetList = this.assetList.concat(res.data.items);

                            //如果最后一页小于20个
                            if (res.data.items.length < this.limt) {
                                this.isLoadMore = true;
                                this.loadStatus = 'nomore';
                            } else {
                                this.isLoadMore = false;
                            }
                        } else {
                            this.isLoadMore = true;
                            this.loadStatus = 'nomore';
                        }
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
        }
    }
</script>

<style>
    .tabten {
        padding: 10px 0 0 0;
        margin: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        background: #FFFFFF;
        position: fixed;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 100rpx;
    }

    .tabten .bacbtn {
        width: 20rpx;
        height: 33rpx;
        margin-left: 20px;
		margin-top: 25px;
    }

    .tabten .wuc-tab {
        width: 570rpx;
    }

    .zijlze {
        font-size: 16px;
        margin: 16px 0 0 20px;
    }

    .listitm {
        padding: 0 0 20px 0;
        border-bottom: 1px solid #EBEBEB;
        margin: 0 10px 20px;
    }

    .listitm .uptext {
        display: flex;
        justify-content: space-between;
        margin: 0 0 10px 0;
    }

    .listitm .uptext text {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ADB0BB;
        display: inline-block;
        width: 160rpx;
        text-align: center;
    }

    .listitm .uptext .timeres {
        width: 320rpx;
    }

    .listitm .downtext {
        display: flex;
        justify-content: space-between;
        text-align: center;
		margin-left: 30px;
    }

    .listitm .downtext text {
        font-size: 16px;
        font-family: Aileron;
        font-weight: 400;
        color: #333333;
        display: inline-block;
        width: 160rpx;
    }

    .listitm .downtext .twex {
        width: 320rpx;
    }

    .tabten picker {
        margin: 10px 10px 0 0;
        display: flex;
    }

    .tabten picker image {
        float: left;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 5px 0 0 0;
    }

    .tabten picker .uniinput {
        display: inline-block;
        font-size: 16px;
        width: 140rpx;
    }
	
	.exchangeImgSmall {
		width: 25px;
		height: 25px;
	}
</style>
